import React, { useEffect, useState } from 'react';

import styles from './index.less';
//  0  140  286  426
const Step = (props: any) => {
  const [aLeft, setALeft] = useState(286);
  const [isADrage, setIsADrage] = useState(false);
  const [bLeft, setBLeft] = useState(426);
  const [isBDrage, setIsBDrage] = useState(false);
  const [tab, setTab] = useState([
    {
      key: 1,
      name: '外送+省内月度',
      className: `${styles.default}`,
    },
    {
      key: 2,
      name: '省内旬交易',
      className: `${styles.default}`,
    },
    {
      key: 3,
      name: '省内日滚动',
      className: `${styles.action3} ${styles.default}`,
    },
  ]);

  useEffect(() => {
    if (props.step === 6) {
      setALeft(286);
      setBLeft(426);
      const drag_a = document.getElementById('drag_a');
      const drag_b = document.getElementById('drag_b');
      drag_a.style.left = '286px';
      drag_b.style.left = '426px';
    }
  }, [props.step]);
  useEffect(() => {
    let offsetX = 0;
    const drag_a = document.getElementById('drag_a');
    const step = document.getElementById('step');
    const drag_b = document.getElementById('drag_b');
    const mouseHandler_a = (e: any) => {
      if (e.type === 'mousedown') {
        offsetX = e.offsetX;
        document.addEventListener('mousemove', mouseHandler_a);
        document.addEventListener('mouseup', mouseHandler_a);
      } else if (e.type === 'mousemove') {
        setIsADrage(true);
        const left = Math.floor(step.getBoundingClientRect().left);
        let drag_a_left = e.clientX - offsetX - left;
        const b_left = Math.floor(drag_b.getBoundingClientRect().left + 4);
        const a_left_b = b_left - left;
        setBLeft(a_left_b);
        if (drag_a_left > a_left_b) {
          drag_a_left = a_left_b;
        }
        // 限制最多移动到盒子边缘
        if (drag_a_left <= 0) {
          drag_a_left = 0;
        } else if (drag_a_left > 0 && drag_a_left <= 70) {
          drag_a_left = 0;
        } else if (drag_a_left > 70 && drag_a_left <= 140) {
          if (a_left_b > 70 && a_left_b <= 140) {
            drag_a_left = 0;
          } else {
            drag_a_left = 140;
          }
        } else if (drag_a_left > 140 && drag_a_left <= 213) {
          if (a_left_b > 140 && a_left_b <= 213) {
            drag_a_left = 0;
          } else {
            drag_a_left = 140;
          }
        } else if (drag_a_left > 213 && drag_a_left <= 286) {
          if (a_left_b > 213 && a_left_b <= 286) {
            drag_a_left = 140;
          } else {
            drag_a_left = 286;
          }
        } else if (drag_a_left > 286 && drag_a_left <= 356) {
          if (a_left_b > 286 && a_left_b <= 356) {
            drag_a_left = 140;
          } else {
            drag_a_left = 286;
          }
        } else if (drag_a_left > 356 && drag_a_left <= 430) {
          drag_a_left = 286;
        }
        setALeft(drag_a_left);
        drag_a.style.left = drag_a_left + 'px';
      } else if (e.type === 'mouseup') {
        setIsADrage(false);
        document.removeEventListener('mousemove', mouseHandler_a);
        document.removeEventListener('mouseup', mouseHandler_a);
      }
    };
    const mouseHandler_b = (e: any) => {
      if (e.type === 'mousedown') {
        offsetX = e.offsetX;
        document.addEventListener('mousemove', mouseHandler_b);
        document.addEventListener('mouseup', mouseHandler_b);
      } else if (e.type === 'mousemove') {
        setIsBDrage(true);
        const left = Math.floor(step.getBoundingClientRect().left);
        const a_left = Math.floor(drag_a.getBoundingClientRect().left + 4);
        let drag_b_left = e.clientX - offsetX - left;
        const a_left_b = a_left - left;
        setALeft(a_left_b);
        // 限制最多移动到盒子边缘
        if (drag_b_left > 430) {
          drag_b_left = 430;
        } else if (drag_b_left < a_left_b) {
          drag_b_left = a_left_b;
        }
        // 限制最多移动到盒子边缘
        if (drag_b_left <= 0) {
          drag_b_left = 140;
        } else if (drag_b_left > 0 && drag_b_left < 140) {
          if (a_left_b > 0 && a_left_b < 140) {
            drag_b_left = 0;
          } else {
            drag_b_left = 140;
          }
        } else if (drag_b_left >= 140 && drag_b_left < 213) {
          if (a_left_b >= 140 && a_left_b < 213) {
            drag_b_left = 286;
          } else {
            drag_b_left = 140;
          }
        } else if (drag_b_left >= 213 && drag_b_left < 286) {
          if (a_left_b >= 213 && a_left_b < 286) {
            drag_b_left = 140;
          } else {
            drag_b_left = 286;
          }
        } else if (drag_b_left >= 286 && drag_b_left < 356) {
          if (a_left_b >= 286 && a_left_b < 356) {
            drag_b_left = 430;
          } else {
            drag_b_left = 286;
          }
        } else if (drag_b_left >= 356 && drag_b_left < 430) {
          drag_b_left = 430;
        }
        setBLeft(drag_b_left);
        drag_b.style.left = drag_b_left + 'px';
      } else if (e.type === 'mouseup') {
        setIsBDrage(false);
        document.removeEventListener('mousemove', mouseHandler_b);
        document.removeEventListener('mouseup', mouseHandler_b);
      }
    };
    if (drag_a) {
      drag_a?.addEventListener('mousedown', mouseHandler_a);
    }
    if (drag_b) {
      drag_b?.addEventListener('mousedown', mouseHandler_b);
    }
  }, []);

  useEffect(() => {
    const newTab = [...tab];
    if (aLeft === 0 && bLeft === 0) {
      newTab[0].className = `${styles.default}`;
      newTab[1].className = `${styles.default}`;
      newTab[2].className = `${styles.default}`;
    } else if (aLeft >= 0 && aLeft < 140 && bLeft > 0 && bLeft <= 140) {
      if (isADrage || isBDrage) {
        newTab[0].className = `${styles.draging1} ${styles.default}`;
        newTab[1].className = `${styles.default}`;
        newTab[2].className = `${styles.default}`;
      } else {
        newTab[0].className = `${styles.action1} ${styles.default}`;
        newTab[1].className = `${styles.default}`;
        newTab[2].className = `${styles.default}`;
      }
      props.onChange(1);
    } else if (aLeft >= 0 && aLeft < 140 && bLeft > 140 && bLeft <= 286) {
      if (isADrage || isBDrage) {
        newTab[0].className = `${styles.draging1} ${styles.default}`;
        newTab[1].className = `${styles.draging2} ${styles.default}`;
        newTab[2].className = `${styles.default}`;
      } else {
        newTab[0].className = `${styles.action1} ${styles.default}`;
        newTab[1].className = `${styles.action2} ${styles.default}`;
        newTab[2].className = `${styles.default}`;
      }
      props.onChange(2);
    } else if (aLeft >= 0 && aLeft < 140 && bLeft > 286 && bLeft <= 430) {
      if (isADrage || isBDrage) {
        newTab[0].className = `${styles.draging1} ${styles.default}`;
        newTab[1].className = `${styles.draging2} ${styles.default}`;
        newTab[2].className = `${styles.draging3} ${styles.default}`;
      } else {
        newTab[0].className = `${styles.action1} ${styles.default}`;
        newTab[1].className = `${styles.action2} ${styles.default}`;
        newTab[2].className = `${styles.action3} ${styles.default}`;
      }
      props.onChange(3);
    } else if (aLeft >= 140 && aLeft < 286 && bLeft > 140 && bLeft <= 286) {
      if (isADrage || isBDrage) {
        newTab[0].className = `${styles.default}`;
        newTab[1].className = `${styles.draging2} ${styles.default}`;
        newTab[2].className = `${styles.default}`;
      } else {
        newTab[0].className = `${styles.default}`;
        newTab[1].className = `${styles.action2} ${styles.default}`;
        newTab[2].className = `${styles.default}`;
      }
      props.onChange(4);
    } else if (aLeft >= 140 && aLeft < 286 && bLeft > 286 && bLeft <= 430) {
      if (isADrage || isBDrage) {
        newTab[0].className = `${styles.default}`;
        newTab[1].className = `${styles.draging2} ${styles.default}`;
        newTab[2].className = `${styles.draging3} ${styles.default}`;
      } else {
        newTab[0].className = `${styles.default}`;
        newTab[1].className = `${styles.action2} ${styles.default}`;
        newTab[2].className = `${styles.action3} ${styles.default}`;
      }
      props.onChange(5);
    } else if (aLeft >= 286 && aLeft < 430 && bLeft > 286 && bLeft <= 430) {
      if (isADrage || isBDrage) {
        newTab[0].className = `${styles.default}`;
        newTab[1].className = `${styles.default}`;
        newTab[2].className = `${styles.draging3} ${styles.default}`;
      } else {
        newTab[0].className = `${styles.default}`;
        newTab[1].className = `${styles.default}`;
        newTab[2].className = `${styles.action3} ${styles.default}`;
      }
      props.onChange(6);
    }
    setTab(newTab);
  }, [aLeft, bLeft, isADrage, isBDrage]);

  return (
    <div className={styles.container}>
      <div className={styles.step} id="step">
        <div className={styles.content}>
          {tab.map((item) => {
            return (
              <div className={item.className} key={item.key}>
                <div className={styles.name}>{item.name}</div>
                <div className={styles.trigon} />
              </div>
            );
          })}
        </div>
        <div className={styles.drag}>
          <div className={styles.drag_a} id="drag_a">
            <div className={styles.trigon} />
            <div className={styles.letter}>A</div>
          </div>
          <div className={styles.drag_b} id="drag_b">
            <div className={styles.trigon} />
            <div className={styles.letter}>B</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Step;
